<template>
    <div v-show="show" v-cloak>
      <ul class="brand_ul2 brand_service_ul">
        <li v-for="(item,index) in questionList">
          <h3 v-html="item.qu_content"></h3>
          <p v-html="item.qu_answer"></p>
        </li>
      </ul>
      <div class="pageul">
        <Page :total="count" :page-size="limit"  prev-text="上一页" next-text="下一页" show-total @on-change="changepage"></Page>
      </div>
    </div>
</template>
<script>
  import 'iview/dist/styles/iview.css'
  export default {
    name: 'anwerlist',
    components: {
    },
    data () {
      return {
        show: false,
        page: 0,
        limit: 6,
        questionList: [],
        questionAjax: true,
        count: 0
      }
    },
    methods: {
      changepage (index) {
        this.page = index - 1
        this.questionList = []
        this.questionAjax = true
        this.getQuestionlist()
      },
      getQuestionlist: function () {
        let thisObj = this
        if (!thisObj.questionAjax) {
          return false
        }
        thisObj.questionAjax = false
        // 获取问答列表
        thisObj.$chaos.ajax({
          data: {
            page: thisObj.page,
            limit: thisObj.limit
          },
          slient: true,
          userinfo: false,
          url: 'Index/getQuestionList',
          callback: function (type, res) {
            thisObj.questionAjax = true
            thisObj.show = true
            if (res.status === 'SUCCESS') {
              if (thisObj.page === 0) {
                thisObj.count = parseInt(res.result.count)
              }
              thisObj.questionList = res.result.list
            } else {
              thisObj.$vux.toast.show({
                text: res.result.msg,
                type: 'text',
                width: '180px',
                position: 'bottom'
              })
            }
          }
        })
      },
      verify: function () {
        let thisObj = this
        var crumbs = []
        crumbs[0] = {
          title: '问答列表',
          link: ''
        }
        this.$store.commit('crumbs', crumbs)
        thisObj.getQuestionlist()
      }
    },
    created: function () {
      this.verify()
    }
  }
</script>
<style>
  .main-title span{
    font-size: 16px!important;
  }
  /*分页样式*/
  .ivu-page-total{
    vertical-align: -2px;
  }
  .ivu-page-item-active{
    background: #2d8cf0!important;
  }
  .ivu-page-item-active a, .ivu-page-item-active:hover a{
    color: #fff!important;
  }
  .ivu-page-item{
    border:1px solid #2d8cf0!important;
  }
  .ivu-page-item-jump-next, .ivu-page-item-jump-prev{
    position: relative!important;
  }
  .ivu-page-item-jump-next:after, .ivu-page-item-jump-prev:after{
    position: absolute;
    top: 0px;
  }
  /*分页样式*/
</style>
<style scoped>
  .brand_ul2 li h3{
   font-size: 20px;
  }
  .brand_ul2 li p{
    text-align: justify;
  }
  .pageul{
    width:100%;
    text-align: center;
    overflow: hidden;
  }
  .brand_service_ul{
    overflow: hidden;
    width: 100%;
    min-height:1700px;
  }
  .topc ul li {
    cursor: pointer;
  }
  .brand_ul2 li {
    margin-top: 30px;
    margin-bottom: 30px;
    overflow: hidden;
    text-align: left;
    list-style-type: none;
    background: url(../../../static/image/zx_8.png) no-repeat;
    padding-left: 33px;
    background-position: 8px 6px;
    background-size: 13px;
  }
  .brand_ul2 li h3 {
    margin-bottom: 20px;
  }
  .brand_ul2 li p {
    line-height: 33px;
    font-size: 16px;
  }
</style>
